<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
	<script type="text/javascript" src="./js/geoxml3.js"></script>
    <script>
var map;
var infowindow = new google.maps.InfoWindow();
var proxy = "/cgi-bin/proxy.php?";
var Long = 100.540094, Lat = 13.770899;

function initialize() {
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(Long, Lat),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
	displayKml();

}
function displayKml() {
	
    geo = new geoXML3.parser({
        map: map,
        zoom: true,
        singleInfoWindow: true,
        infoWindow: infowindow,
        createMarker: createMarker 
    });
    geo.parse("bigpipe1.kml");
}
function refreshKml() {
	hideKml();
	displayKml();
}
 function hideKml(){

    geo.hideDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js
			
}
function createMarker(placemark, doc) {
  // create a Marker to the map from a placemark KML object

    // Load basic marker properties
	var image = 'equip4.png';
    var markerOptions = {
		map:      map,
		position: new google.maps.LatLng(placemark.point.lat, placemark.point.lng),
		title:    placemark.name,
		zIndex:   Math.round(-placemark.point.lat * 100000),
		//icon:     placemark.style.icon,
		icon: image
		//shadow:   placemark.style.shadow 
	};

    // Create the marker on the map
    var marker = new google.maps.Marker(markerOptions);
    if (!!doc) {
       //doc.markers.push(marker);
    }

    // Set up and create the infowindow
    var infoWindowOptions = {
      content: '<div class="infowindow"><h3>' + placemark.name + 
				 '</h3><div>' + placemark.description + '</div>' +
			   placemark.ExtendedData+
			   '</div>',
      pixelOffset: new google.maps.Size(0, 2)
    };
    infowindow.setOptions(infoWindowOptions);
    marker.infoWindowOptions = infoWindowOptions;
    marker.infoWindow = infowindow;
	console.log(placemark);
    // Infowindow-opening event handler
    google.maps.event.addListener(marker, 'click', function() {
      this.infoWindow.close();
      marker.infoWindow.setOptions(this.infoWindowOptions);
      this.infoWindow.open(this.map, this);
    });
    placemark.marker = marker;
	
    return marker;
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
	<button id="hide" style="z-index" onclick="hideKml();">HIDE</button>
	<button id="hide" style="z-index" onclick="displayKml();">SHOW</button>
	<button id="hide" style="z-index" onclick="refreshKml();">REFRESH</button>
    <div id="map-canvas"></div>
	
  </body>
</html>